<!DOCTYPE>
<html>

<head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="天地图" />
    <title>天地图－地图API－范例－经纬度直投地图</title>
    <link rel="stylesheet" type="text/css" href="css/shCore.css" />
    <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="js/scale.fix.js"></script>
    <script type="text/javascript" src="js/ZeroClipboard.js"></script>
    <script type="text/javascript" src="js/allscript.js"></script>
    <script type="text/javascript" src="http://api.tianditu.com/api?v=4.0"></script>
    <script type="text/javascript" src="js/showCode.js"></script>
    <script type="text/javascript" id="codetoshow">
        var map;
        var zoom = 15;
        function onLoad() {
            map = new T.Map('mapDiv');
            map.centerAndZoom(new T.LngLat(119.256630,26.081300), zoom);
            var config = {
                pageCapacity: 10,	//每页显示的数量
                onSearchComplete: localSearchResult	//接收数据的回调函数
            };
            //创建搜索对象
            localsearch = new T.LocalSearch(map, config);

            var cp = new T.CoordinatePickup(map, { callback: getLngLat })
            cp.addEvent();
        }

        function getLngLat(lnglat) {
            document.getElementById("lnglatStr").value = lnglat.lng.toFixed(6) + "," + lnglat.lat.toFixed(6);
        }


        function localSearchResult(result) {
            //清空地图及搜索列表
            clearAll();

            //添加提示词
            prompt(result);

            //根据返回类型解析搜索结果
            switch (parseInt(result.getResultType())) {
                case 1:
                    //解析点数据结果
                    pois(result.getPois());
                    break;
                case 2:
                    //解析推荐城市
                    statistics(result.getStatistics());
                    break;
                case 3:
                    //解析行政区划边界
                    area(result.getArea());
                    break;
                case 4:
                    //解析建议词信息
                    suggests(result.getSuggests());
                    break;
                case 5:
                    //解析公交信息
                    lineData(result.getLineData());
                    break;
            }
        }

        //解析提示词
        function prompt(obj) {
            var prompts = obj.getPrompt();
            if (prompts) {
                var promptHtml = "";
                for (var i = 0; i < prompts.length; i++) {
                    var prompt = prompts[i];
                    var promptType = prompt.type;
                    var promptAdmins = prompt.admins;
                    var meanprompt = prompt.DidYouMean;
                    if (promptType == 1) {
                        promptHtml += "<p>您是否要在" + promptAdmins[0].name + "</strong>搜索更多包含<strong>" + obj.getKeyword() + "</strong>的相关内容？<p>";
                    }
                    else if (promptType == 2) {
                        promptHtml += "<p>在<strong>" + promptAdmins[0].name + "</strong>没有搜索到与<strong>" + obj.getKeyword() + "</strong>相关的结果。<p>";
                        if (meanprompt) {
                            promptHtml += "<p>您是否要找：<font weight='bold' color='#035fbe'><strong>" + meanprompt + "</strong></font><p>";
                        }
                    }
                    else if (promptType == 3) {
                        promptHtml += "<p style='margin-bottom:3px;'>有以下相关结果，您是否要找：</p>"
                        for (i = 0; i < promptAdmins.length; i++) {
                            promptHtml += "<p>" + promptAdmins[i].name + "</p>";
                        }
                    }
                }
                if (promptHtml != "") {
                    document.getElementById("promptDiv").style.display = "block";
                    document.getElementById("promptDiv").innerHTML = promptHtml;
                }
            }
        }

        //解析点数据结果
        function pois(obj) {
            if (obj) {
                //显示搜索列表
                var divMarker = document.createElement("div");
                //坐标数组，设置最佳比例尺时会用到
                var zoomArr = [];
                for (var i = 0; i < obj.length; i++) {
                    //闭包
                    (function (i) {
                        //名称
                        var name = obj[i].name;
                        //地址
                        var address = obj[i].address;
                        //坐标
                        var lnglatArr = obj[i].lonlat.split(" ");
                        var lnglat = new T.LngLat(lnglatArr[0], lnglatArr[1]);

                        var winHtml = "名称:" + name + "<br/>地址:" + address;

                        //创建标注对象
                        var marker = new T.Marker(lnglat);
                        //地图上添加标注点
                        map.addOverLay(marker);
                        //注册标注点的点击事件
                        var markerInfoWin = new T.InfoWindow(winHtml, { autoPan: true });
                        marker.addEventListener("click", function () {
                            marker.openInfoWindow(markerInfoWin);
                        });

                        zoomArr.push(lnglat);

                        //在页面上显示搜索的列表
                        var a = document.createElement("a");
                        a.href = "javascript://";
                        a.innerHTML = name;
                        a.onclick = function () {
                            showPosition(marker, winHtml);
                        }
                        divMarker.appendChild(document.createTextNode((i + 1) + "."));
                        divMarker.appendChild(a);
                        divMarker.appendChild(document.createElement("br"));
                    })(i);
                }
                //显示地图的最佳级别
                map.setViewport(zoomArr);
                //显示搜索结果
                divMarker.appendChild(document.createTextNode('共' + localsearch.getCountNumber() + '条记录，分' + localsearch.getCountPage() + '页,当前第' + localsearch.getPageIndex() + '页'));
                document.getElementById("searchDiv").appendChild(divMarker);
                document.getElementById("resultDiv").style.display = "block";
            }
        }

        //显示信息框
        function showPosition(marker, winHtml) {
            var markerInfoWin = new T.InfoWindow(winHtml, { autoPan: true });
            marker.openInfoWindow(markerInfoWin);
        }

        //解析推荐城市
        function statistics(obj) {
            if (obj) {
                //坐标数组，设置最佳比例尺时会用到
                var pointsArr = [];
                var priorityCitysHtml = "";
                var allAdminsHtml = "";
                var priorityCitys = obj.priorityCitys;
                if (priorityCitys) {
                    //推荐城市显示
                    priorityCitysHtml += "在中国以下城市有结果<ul>";
                    for (var i = 0; i < priorityCitys.length; i++) {
                        priorityCitysHtml += "<li>" + priorityCitys[i].name + "(" + priorityCitys[i].count + ")</li>";
                    }
                    priorityCitysHtml += "</ul>";
                }

                var allAdmins = obj.allAdmins;
                if (allAdmins) {
                    allAdminsHtml += "更多城市<ul>";
                    for (var i = 0; i < allAdmins.length; i++) {
                        allAdminsHtml += "<li>" + allAdmins[i].name + "(" + allAdmins[i].count + ")";
                        var childAdmins = allAdmins[i].childAdmins;
                        if (childAdmins) {
                            for (var m = 0; m < childAdmins.length; m++) {
                                allAdminsHtml += "<blockquote>" + childAdmins[m].name + "(" + childAdmins[m].count + ")</blockquote>";
                            }
                        }
                        allAdminsHtml += "</li>"
                    }
                    allAdminsHtml += "</ul>";
                }
                document.getElementById("statisticsDiv").style.display = "block";
                document.getElementById("statisticsDiv").innerHTML = priorityCitysHtml + allAdminsHtml;
            }
        }

        //解析行政区划边界
        function area(obj) {
            if (obj) {
                //坐标数组，设置最佳比例尺时会用到
                var pointsArr = [];
                var points = obj.points;
                for (var i = 0; i < points.length; i++) {
                    var regionLngLats = [];
                    var regionArr = points[i].region.split(",");
                    for (var m = 0; m < regionArr.length; m++) {
                        var lnglatArr = regionArr[m].split(" ");
                        var lnglat = new T.LngLat(lnglatArr[0], lnglatArr[1]);
                        regionLngLats.push(lnglat);
                        pointsArr.push(lnglat);
                    }
                    //创建线对象
                    var line = new T.Polyline(regionLngLats, { color: "blue", weight: 3, opacity: 1, lineStyle: "dashed" });
                    //向地图上添加线
                    map.addOverLay(line);
                }
                //显示最佳比例尺
                map.setViewport(pointsArr);
            }
        }



        //解析建议词信息
        function suggests(obj) {
            if (obj) {
                //建议词提示，如果搜索类型为公交规划建议词或公交站搜索时，返回结果为公交信息的建议词。
                var suggestsHtml = "建议词提示<ul>";
                for (var i = 0; i < obj.length; i++) {
                    suggestsHtml += "<li>" + obj[i].name + "&nbsp;&nbsp;<font style='color:#666666'>" + obj[i].address + "</font></li>";
                }
                suggestsHtml += "</ul>";
                document.getElementById("suggestsDiv").style.display = "block";
                document.getElementById("suggestsDiv").innerHTML = suggestsHtml;
            }
        }

        //解析公交信息
        function lineData(obj) {
            if (obj) {
                //公交提示
                var lineDataHtml = "公交提示<ul>";
                for (var i = 0; i < obj.length; i++) {
                    lineDataHtml += "<li>" + obj[i].name + "&nbsp;&nbsp;<font style='color:#666666'>共" + obj[i].stationNum + "站</font></li>";
                }
                lineDataHtml += "</ul>";
                document.getElementById("lineDataDiv").style.display = "block";
                document.getElementById("lineDataDiv").innerHTML = lineDataHtml;
            }
        }

        //清空地图及搜索列表
        function clearAll() {
            map.clearOverLays();
            document.getElementById("searchDiv").innerHTML = "";
            document.getElementById("resultDiv").style.display = "none";
            document.getElementById("statisticsDiv").innerHTML = "";
            document.getElementById("statisticsDiv").style.display = "none";
            document.getElementById("promptDiv").innerHTML = "";
            document.getElementById("promptDiv").style.display = "none";
            document.getElementById("suggestsDiv").innerHTML = "";
            document.getElementById("suggestsDiv").style.display = "none";
            document.getElementById("lineDataDiv").innerHTML = "";
            document.getElementById("lineDataDiv").style.display = "none";
        }
    </script>
</head>






<body>
    

    <div id="outter">
        <div id="mapDiv" style="position:absolute;"></div>
        <div id="describediv">
            用鼠标在地图上点选获得地理坐标
            <input type="text" id="lnglatStr" value="" />
            <ul>
                <li>本示例演示如何在地图上用鼠标获得坐标。</li>

            </ul>
        </div>

        <div id="describediv1">
            <!-- 搜索面板 -->
            <div class="search">
                搜索内容：<input type="text" id="keyWord" value="天安门" />
                <input type="button" onClick="localsearch.search(document.getElementById('keyWord').value)" value="搜索" />
            </div>
            <br/>
            <!-- 提示词面板 -->
            <div id="promptDiv" class="prompt"></div>
            <!-- 统计面板 -->
            <div id="statisticsDiv" class="statistics"></div>
            <!-- 建议词面板 -->
            <div id="suggestsDiv" class="suggests"></div>
            <!-- 公交提示面板 -->
            <div id="lineDataDiv" class="lineData"></div>
            <!-- 搜索结果面板 -->
            <div id="resultDiv" class="result">
                <div id="searchDiv"></div>
                <div id="pageDiv">
                    <input type="button" value="第一页" onClick="localsearch.firstPage()" />
                    <input type="button" value="上一页" onClick="localsearch.previousPage()" />
                    <input type="button" value="下一页" onClick="localsearch.nextPage()" />
                    <input type="button" value="最后一页" onClick="localsearch.lastPage()" />
                    <br/> 转到第
                    <input type="text" value="1" id="pageId" size="3" />页
                    <input type="button" onClick="localsearch.gotoPage(parseInt(document.getElementById('pageId').value));" value="转到" />
                </div>
            </div>
        </div>
    </div>

</body>

</html>